<template>
    <el-row>
        <el-form label-width="100px" :model="form" ref="form" :rules="rules">
            <el-form-item label="店铺名称" prop="name">
                <el-input v-model="form.name" placeholder="请填写店铺名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="店铺简介">
                <el-input v-model="form.info" type="textarea" :rows='4' placeholder="请填写店铺简介"></el-input>
            </el-form-item>
            <el-form-item label="店铺图片" prop="img_url">
                <el-input v-model="form.img_url" style="display:none"></el-input>
                <div class="upload-list" v-if='form.img_url'>
                    <img :src="form.img_url">
                    <div class="upload-list-cover">
                        <i class="el-icon-edit" @click="uploadImg"></i>
                        <i class="el-icon-delete" @click="handleDel"></i>
                    </div>
                </div>
                <div @click='uploadImg' class='upload-img' v-else>
                    <i class='el-icon-upload'></i>
                </div>
            </el-form-item>
            <el-form-item label="店铺电话" prop="tel">
                <el-input v-model="form.tel" placeholder="请填写店铺电话"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址" prop="address">
                <el-input v-model="form.address" placeholder="请点击地图选择店铺地址"></el-input>
                <div class="amap-wrapper" v-if='showEditor'>
                    <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" :events="events"></el-amap-search-box>
                    <el-amap vid="amapDemo" :zoom="zoom" :center="center" :plugin="plugin" :events="events">
                        <el-amap-marker v-for="(marker,index) in markers" :key='index' :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
                    </el-amap>
                </div>
            </el-form-item>
            <el-form-item label="店铺状态">
                <el-switch v-model="form.status"></el-switch>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="save('form')">保存</el-button>
            </el-form-item>
        </el-form>
        <Upload :show="showUpload" @on-selected="selectImg" @on-cancel="cancelUpload"></Upload>
    </el-row>
</template>
<script>
export default {
    layout(context) {
        return context.app.$cookies.get("layout");
    },
    data() {
        let self = this;
        return {
            form: {
                name: "",
                img_url: "",
                info: "",
                tel: "",
                address: "",
                lng: "",
                lat: "",
                status: true
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请填写店铺名称",
                        trigger: "change"
                    }
                ],
                img_url: [
                    {
                        required: true,
                        message: "请上传店铺图片",
                        trigger: "change"
                    }
                ],
                tel: [
                    {
                        required: true,
                        message: "请填写店铺电话",
                        trigger: "change"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请点击地图选择店铺地址",
                        trigger: "change"
                    }
                ]
            },
            showUpload: false,
            showEditor: false,
            //地图
            zoom: 12,
            center: [113.657202, 34.821166],
            plugin: [
                {
                    // 工具条
                    pName: "ToolBar"
                },
                {
                    // 比例尺
                    pName: "Scale"
                }
            ],
            markers: [
                {
                    position: [113.657202, 34.821166],
                    visible: true,
                    draggable: false
                }
            ],
            searchOption: {
                city: "",
                citylimit: false
            },
            events: {
                click(e) {
                    let { lng, lat } = e.lnglat;
                    self.markers[0].position = [lng, lat];
                    self.form.lng = lng;
                    self.form.lat = lat;
                    self.center = [lng, lat];
                    // 这里通过高德 SDK 完成。
                    var geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: "all"
                    });
                    geocoder.getAddress([lng, lat], function(status, result) {
                        if (status === "complete" && result.info === "OK") {
                            if (result && result.regeocode) {
                                self.form.address =
                                    result.regeocode.formattedAddress;
                                self.$nextTick();
                            }
                        }
                    });
                }
            }
        };
    },
    async asyncData({ app }) {
        let data = {
            form: {},
            markers: [{ position: [] }]
        };
        const res = await app.$axios.$get(`/api/shop/home/shop/shop/index`);
        if (res && res.errmsg === "ok") {
            data.form = res.data;
            data.form.status = res.data.status ? true : false;
            if (res.data.lng && res.data.lat) {
                data.markers[0].position = data.center = [
                    res.data.lng,
                    res.data.lat
                ];
            } else {
                data.markers[0].position = data.center = [
                    113.657202,
                    34.821166
                ];
            }
        }
        return data;
    },
    mounted() {
        this.showEditor = true;
    },
    methods: {
        uploadImg() {
            this.showUpload = true;
        },
        selectImg(res) {
            this.showUpload = false;
            if (res.id > 0) {
                this.form.img_url = res.url;
            }
        },
        cancelUpload() {
            this.showUpload = false;
        },
        handleDel() {
            this.form.img_url = "";
        },
        //地图搜索
        onSearchResult(pois) {
            let latSum = 0;
            let lngSum = 0;
            if (pois.length > 0) {
                pois.forEach(poi => {
                    let { lng, lat } = poi;
                    lngSum += lng;
                    latSum += lat;
                    this.markers[0].position = [poi.lng, poi.lat];
                });
                let center = {
                    lng: lngSum / pois.length,
                    lat: latSum / pois.length
                };
                this.center = [center.lng, center.lat];
                this.markers[0].position = [center.lng, center.lat];
                this.form.address = pois[0].name;
                this.form.lng = center.lng.toFixed(6);
                this.form.lat = center.lat.toFixed(6);
            }
        },
        save(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            let data = {
                name: this.form.name,
                info: this.form.info,
                img_url: this.form.img_url,
                status: this.form.status,
                tel: this.form.tel,
                address: this.form.address,
                lng: this.form.lng,
                lat: this.form.lat
            };
            const res = await this.$axios.$post(
                "/api/shop/home/shop/shop/add",
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("保存成功");
            }
        }
    }
};
</script>
<style>
.amap-wrapper {
    width: 100%;
    height: 450px;
    position: relative;
    top: -20px;
    overflow: hidden;
}
.search-box {
    position: absolute;
    top: 60px;
    left: 80px;
}
</style>


